<template>
  <div class="main">
    <div class="mainLeft">
      <div class="mainLeftTop">
        <div class="ceng1"></div>
        <div class="mainLeftTopL">
          <div class="titleGzd"></div>
          <div class="textGzd">关注度</div>
          <div class="dataGzd">30%</div>
          <div id="gzd"></div>
        </div>
        <div class="mainLeftTopC">
          <div class="titleWh"></div>
          <div class="textWh">危化企业</div>
          <div class="dataWh">50%</div>
          <div id="wh"></div>
        </div>
        <div class="mainLeftTopR">
          <div class="titleYh"></div>
          <div class="textYh">安全隐患</div>
          <div class="dataYh">20%</div>
          <div id="yh"></div>
        </div>
      </div>
      <div class="mainLeftCenter">
        <div class="ceng2"></div>
        <div class="mainLeftCenterL">
          <div class="titleFgyz">非公有制经济组织</div>
          <div id="fgyz"></div>
        </div>
        <div class="mainLeftCenterR">
          <div class="titleNld">年龄段</div>
          <div id="nld"></div>
        </div>
      </div>
      <div class="mainLeftBottom">
        <div class="ceng3"></div>
        <div class="mainLeftBottomL">
          <div class="titleLb">高关注度企业列表</div>
          <div class="dataLb">
            <ul>
              <li><span>高关注度企业</span><span class="dateL">2018-04-14</span></li>
              <li><span>高关注度企业</span><span class="dateL">2018-04-14</span></li>
              <li><span>高关注度企业</span><span class="dateL">2018-04-14</span></li>
              <li><span>高关注度企业</span><span class="dateL">2018-04-14</span></li>
            </ul>
          </div>
        </div>
        <div class="mainLeftBottomR">
          <div class="titleCd">关注程度</div>
          <div id="cd"></div>
        </div>
      </div>
    </div>
    <div class="mainRight">
      <div class="mainRightT">
        <div class="ceng4"></div>
        <div class="titleCxzt">社会组织存续状态</div>
        <div id="cxzt"></div>
      </div>
      <div class="mainRightC">
        <div class="ceng5"></div>
        <div class="titlezztj">社会组织统计</div>
        <div id="zztj"></div>
      </div>
      <div class="mainRightB">
        <div class="ceng6"></div>
        <div class="titleDysl">各类型组织与党员数量</div>
        <div id="dysl"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {}
  },
  mounted () {
    this.gzd()
    this.wh()
    this.yh()
    this.nld()
    this.cd()
    this.cxzt()
    this.zztj()
    this.dysl()
    this.fgyz()
  },
  methods: {
    gzd () {
      let gzdEcharts = this.$echarts.init(document.getElementById('gzd'))
      gzdEcharts.setOption({
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: '关注度',
            type: 'gauge',
            detail: {formatter: '{value}%'},
            data: [{value: 30, name: ''}]
          }
        ]
      })
    },
    wh () {
      let whEcharts = this.$echarts.init(document.getElementById('wh'))
      whEcharts.setOption({
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: '关注度',
            type: 'gauge',
            detail: {formatter: '{value}%'},
            data: [{value: 50, name: ''}]
          }
        ]
      })
    },
    yh () {
      let yhEcharts = this.$echarts.init(document.getElementById('yh'))
      yhEcharts.setOption({
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: '关注度',
            type: 'gauge',
            detail: {formatter: '{value}%'},
            data: [{value: 20, name: ''}]
          }
        ]
      })
    },
    nld () {
      let nldEcharts = this.$echarts.init(document.getElementById('nld'))
      nldEcharts.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['20-35', '35-45', '45-55', '55岁以上'],
          y: 10,
          textStyle: {
            color: 'white'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['内资企业', '外资企业', '个体工商户', '农民专业合作社', '其他企业'],
            axisLabel: {
              interval: 0,
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '数量',
            axisLine: {
              lineStyle: {
                color: 'white'
              }
            },
            axisLabel: {
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        series: [
          {
            name: '20-35',
            type: 'bar',
            barWidth: 40,
            stack: '广告',
            data: [120, 132, 101, 134, 90],
            color: '#2159e6'
          },
          {
            name: '35-45',
            type: 'bar',
            stack: '广告',
            data: [220, 182, 191, 234, 290],
            color: '#ffc000'
          },
          {
            name: '45-55',
            type: 'bar',
            stack: '广告',
            data: [150, 232, 201, 154, 190],
            color: '#68d26e'
          },
          {
            name: '55岁以上',
            type: 'bar',
            stack: '广告',
            data: [150, 232, 201, 154, 190],
            color: '#53c1d8'
          }
        ]
      })
    },
    cd () {
      let cdEcharts = this.$echarts.init(document.getElementById('cd'))
      cdEcharts.setOption({
        backgroundColor: '',

        title: {
          text: '',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#ccc'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
              {value: 335, name: '高'},
              {value: 310, name: '中'},
              {value: 274, name: '低'}
            ].sort(function (a, b) { return a.value - b.value }),
            roseType: 'radius',
            color: ['#e67819', '#68d26e', '#2c56b3'],
            // label: {
            //   normal: {
            //     textStyle: {
            //       color: 'rgba(255, 255, 255, 0.3)'
            //     }
            //   }
            // },
            // labelLine: {
            //   normal: {
            //     lineStyle: {
            //       color: 'rgba(255, 255, 255, 0.3)'
            //     },
            //     smooth: 0.2,
            //     length: 10,
            //     length2: 20
            //   }
            // },
            // itemStyle: {
            //   normal: {
            //     color: '#c23531',
            //     shadowBlur: 200,
            //     shadowColor: 'rgba(0, 0, 0, 0.5)'
            //   }
            // },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200
            }
          }
        ]
      })
    },
    cxzt () {
      let cxztEcharts = this.$echarts.init(document.getElementById('cxzt'))
      cxztEcharts.setOption({
        title: {
          text: '',
          subtext: '',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        calculable: true,
        series: [

          {
            name: '面积模式',
            type: 'pie',
            radius: [30, 110],
            roseType: 'area',
            x: '50%',
            max: 40,
            sort: 'ascending',
            data: [
              {value: 10, name: '存续'},
              {value: 5, name: '在业'},
              {value: 15, name: '吊销'},
              {value: 25, name: '注销'},
              {value: 20, name: '迁入'},
              {value: 35, name: '迁出'},
              {value: 30, name: '停业'},
              {value: 17, name: '清算'}
            ]
          }
        ]
      })
    },
    zztj () {
      let zztjEcharts = this.$echarts.init(document.getElementById('zztj'))
      zztjEcharts.setOption({
        tooltip: {},
        // legend: {
        //   data: ['小学', '初中', '高中', '大学']
        // },
        xAxis: {
          data: ['社会团体', '民办非企业单位', '基金会', '其他'],
          axisLabel: {
            interval: 0,
            textStyle: {
              color: 'white'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '数量',
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          axisLabel: {
            textStyle: {
              color: 'white'
            }
          }
        },
        series: [
          {
            name: '社会团体',
            type: 'bar',
            barGap: '-100%',
            barWidth: 40,
            itemStyle: {
              normal: {
                color: '#18abed'
              }
            },
            data: [5, 0, 0, 0]
          },
          {
            name: '民办非企业单位',
            type: 'bar',
            barGap: '-100%',
            itemStyle: {
              normal: {
                color: '#8ac452'
              }
            },
            data: [0, 20, 0, 0]
          },
          {
            name: '基金会',
            type: 'bar',
            barGap: '-100%',
            itemStyle: {
              normal: {
                color: '#e89807'
              }
            },
            data: [0, 0, 36, 0]
          },
          {
            name: '其他',
            type: 'bar',
            barGap: '-100%',
            itemStyle: {
              normal: {
                color: '#f41d45'
              }
            },
            data: [0, 0, 0, 10]
          }
        ]
      })
    },
    dysl () {
      let dyslEcharts = this.$echarts.init(document.getElementById('dysl'))
      dyslEcharts.setOption({
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['组织数量', '党员数量'],
          y: 20,
          textStyle: {
            color: 'white'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['共青团', '妇联', '工会'],
          axisLabel: {
            textStyle: {
              color: 'white'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: 'white'
            }
          }
        },
        series: [
          {
            name: '组织数量',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210],
            color: '#edd723'
          },
          {
            name: '党员数量',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310],
            color: '#f86331'
          }
        ]
      })
    },
    fgyz () {
      let fgyzEcharts = this.$echarts.init(document.getElementById('fgyz'))
      fgyzEcharts.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          y: 15,
          data: ['男', '女'],
          textStyle: {
            color: 'white'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['内资企业', '外资企业', '个体工商户', '农民专业合作社', '其他企业'],
            axisLabel: {
              interval: 0,
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '员工数量',
            axisLine: {
              lineStyle: {
                color: 'white'
              }
            },
            axisLabel: {
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        series: [
          {
            name: '女',
            type: 'bar',
            barWidth: 40,
            stack: '性别',
            data: [120, 132, 101, 134, 90],
            color: '#51c2d3'
          },
          {
            name: '男',
            type: 'bar',
            stack: '性别',
            data: [220, 182, 191, 234, 290],
            color: '#fdbe00'
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
.main{
  width: 100%;
  display: flex;
  justify-content: center;
}
.mainLeft{
  width: 69%;
  height:1000px;
  margin-right: 10px;
}
  .mainRight{
    width: 30%;
    height: 1000px;
  }
  .mainLeftTop,.mainLeftCenter,.mainLeftBottom{
    width: 100%;
    height: 33%;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    position: relative;
  }
  .mainLeftTopL,.mainLeftTopC,.mainLeftTopR{
    width: 33.3%;
    height: 100%;
    position: relative;
  }
  .ceng1{
    width: 100%;
    height: 100%;
    position: absolute;
    /*background: rgb(01, 33, 66);*/
    background: #101977;
    opacity: 0.2;
    border: 1px solid #07a6ff;
    border-radius: 6px;
  }
  .titleGzd{
    width: 45%;
    height: 25px;
    background-image: url('~@/assets/bigdata/img/yF1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
    margin-top: 10px;
  }
  .textGzd{
    color: white;
    font-size: 12px;
    position: absolute;
    top: 14.5px;
    left: 33%;
  }
  .dataGzd{
    color: white;
    font-size: 12px;
    position: absolute;
    top: 16px;
    left: 49%;
    width: 77px;
    text-align: center;
  }
  #gzd{
    width: 100%;
    height: 100%;
  }
  .titleWh{
    width: 45%;
    height: 25px;
    background-image: url('~@/assets/bigdata/img/yF2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
    margin-top: 10px;
  }
  .textWh{
    color: white;
    font-size: 12px;
    position: absolute;
    top: 14px;
    left: 32%;
  }
  .dataWh{
    color: white;
    font-size: 12px;
    position: absolute;
    top: 16px;
    left: 49%;
    width: 77px;
    text-align: center;
  }
  #wh,#yh{
    width: 100%;
    height: 100%;
  }
  .titleYh{
    width: 45%;
    height: 25px;
    background-image: url('~@/assets/bigdata/img/yF3.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
    margin-top: 10px;
  }
  .textYh{
    color: white;
    font-size: 12px;
    position: absolute;
    top: 14px;
    left: 32%;
  }
  .dataYh{
    color: white;
    font-size: 12px;
    position: absolute;
    top: 16px;
    left: 49%;
    width: 77px;
    text-align: center;
  }
  .ceng2{
    width: 100%;
    height: 100%;
    position: absolute;
    /*background: rgb(01, 33, 66);*/
    background: #101977;
    opacity: 0.2;
    border: 1px solid #07a6ff;
    border-radius: 6px;
  }
  .mainLeftCenterL,.mainLeftCenterR{
    width: 50%;
    height: 100%;
    position: relative;
  }
  .titleFgyz{
    color: white;
    font-size: 16px;
    margin-top: 10px;
    text-align: center;
  }
  .titleNld{
    color: white;
    font-size: 16px;
    margin-top: 10px;
    text-align: center;
  }
  #nld{
    width: 100%;
    height: 90%;
  }
  .ceng3{
    width: 100%;
    height: 100%;
    position: absolute;
    /*background: rgb(01, 33, 66);*/
    background: #101977;
    opacity: 0.2;
    border: 1px solid #07a6ff;
    border-radius: 6px;
  }
  .mainLeftBottomL,.mainLeftBottomR{
    width: 50%;
    height: 100%;
    position: relative;
  }
  .titleLb{
    color: white;
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: center;
  }
  .titleCd{
    color: white;
    font-size: 16px;
    margin-top: 10px;
    text-align: center;
  }
  #cd{
    width: 100%;
    height: 100%;
  }
  .mainRightT,.mainRightC,.mainRightB{
    width: 100%;
    height: 33%;
    margin-bottom: 10px;
    position: relative;
  }
  .ceng4{
    width: 100%;
    height: 100%;
    position: absolute;
    /*background: rgb(01, 33, 66);*/
    background: #101977;
    opacity: 0.2;
    border: 1px solid #07a6ff;
    border-radius: 6px;
  }
  .titleCxzt{
    color: white;
    font-size: 16px;
    /*margin-top: 10px;*/
    text-align: center;
    position: relative;
    top: 10px;
  }
  #cxzt{
    width: 100%;
    height: 100%;
  }
  .ceng5{
    width: 100%;
    height: 100%;
    position: absolute;
    /*background: rgb(01, 33, 66);*/
    background: #101977;
    opacity: 0.2;
    border: 1px solid #07a6ff;
    border-radius: 6px;
  }
  .titlezztj{
    color: white;
    font-size: 16px;
    /*margin-top: 10px;*/
    text-align: center;
    position: relative;
    top: 10px;
  }
  #zztj{
    width: 100%;
    height: 100%;
  }
  .ceng6{
    width: 100%;
    height: 100%;
    position: absolute;
    /*background: rgb(01, 33, 66);*/
    background: #101977;
    opacity: 0.2;
    border: 1px solid #07a6ff;
    border-radius: 6px;
  }
  .titleDysl{
    color: white;
    font-size: 16px;
    /*margin-top: 10px;*/
    text-align: center;
    position: relative;
    top: 10px;
  }
  #dysl,#fgyz{
    width: 100%;
    height: 90%;
  }
  .dataLb{
    color: white;
    font-size: 14px;
  }
.dataLb ul li{
  height: 40px;
  line-height: 44px;
  padding-left: 26px;
  padding-right: 29px;
  color: white;
  background-image: url('~@/assets/bigdata/img/listbg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: 14px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
.dateL{
  color: #00ffc6
}
</style>
